<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Detailed article about Modern JavaScript Features">
    <title>Modern JavaScript Features | John Doe</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700&family=Fira+Code&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <!-- 替换为CDN资源 -->
    <link rel="stylesheet" 
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 
          integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 
          crossorigin="anonymous" 
          referrerpolicy="no-referrer" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="font-inter bg-white text-dark">
    <!-- Navigation -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all">
        <nav class="container flex items-center justify-between py-4">
            <a href="/" class="font-montserrat font-bold text-primary text-xl">JD</a>
            <div class="hidden md:flex space-x-8">
                <a href="/" class="text-gray-600 hover:text-primary">Home</a>
                <a href="/about.html" class="text-gray-600 hover:text-primary">About</a>
                <a href="/projects.html" class="text-gray-600 hover:text-primary">Projects</a>
                <a href="/blog.html" class="text-gray-600 hover:text-primary">Blog</a>
                <a href="/contact.html" class="text-gray-600 hover:text-primary">Contact</a>
            </div>
            <button class="md:hidden" aria-expanded="false" aria-label="Menu">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </nav>
    </header>

    <!-- Article Detail Section -->
    <main class="container py-8 md:py-16">
        <article class="max-w-4xl mx-auto">
            <!-- Article Header -->
            <header class="mb-12">
                <div class="flex items-center mb-4">
                    <a href="/blog.html" class="text-primary hover:text-secondary flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Blog
                    </a>
                </div>
                <div class="flex items-center mb-4">
                    <span class="tag tag-primary">Web Dev</span>
                    <span class="text-gray-500 text-sm ml-4">June 15, 2023 • 8 min read</span>
                </div>
                <h1 class="font-montserrat text-3xl md:text-4xl font-bold mb-6">Modern JavaScript Features You Should Know</h1>
                <div class="flex items-center">
                    <img src="/assets/images/profile.jpg" 
                         alt="John Doe" 
                         class="w-10 h-10 rounded-full mr-3"
                         loading="lazy">
                    <div>
                        <p class="font-medium">John Doe</p>
                        <p class="text-sm text-gray-500">Frontend Developer</p>
                    </div>
                </div>
            </header>

            <!-- Article Content -->
            <div class="prose max-w-none">
                <picture>
                    <source srcset="/assets/images/blog-detail1.webp" type="image/webp">
                    <img src="/assets/images/blog-detail1.jpg" 
                         alt="JavaScript code example" 
                         class="rounded-lg shadow-md w-full h-auto mb-8 cursor-zoom-in"
                         loading="lazy"
                         width="1200"
                         height="675"
                         onclick="openImageModal(this)">
                </picture>

                <p class="lead">
                    JavaScript has evolved significantly in recent years, introducing powerful features that can make your code more concise and expressive. 
                    In this article, we'll explore some of the most useful modern JavaScript features.
                </p>

                <h2 class="font-montserrat text-2xl font-semibold mt-12 mb-4">Optional Chaining</h2>
                <p>
                    Optional chaining (<code>?.</code>) allows you to read the value of a property located deep within a chain of connected objects without having to validate each reference in the chain.
                </p>
                
                <pre class="bg-gray-50 p-4 rounded-lg overflow-x-auto my-6" data-lang="javascript">
                    <code>
// Old way
const street = user && user.address && user.address.street;

// With optional chaining
const street = user?.address?.street;
                    </code>
                </pre>

                <h2 class="font-montserrat text-2xl font-semibold mt-12 mb-4">Nullish Coalescing</h2>
                <p>
                    The nullish coalescing operator (<code>??</code>) is a logical operator that returns its right-hand side operand when its left-hand side operand is <code>null</code> or <code>undefined</code>.
                </p>

                <pre class="bg-gray-50 p-4 rounded-lg overflow-x-auto my-6" data-lang="javascript">
                    <code>
// Old way
const value = someValue !== null && someValue !== undefined ? someValue : defaultValue;

// With nullish coalescing
const value = someValue ?? defaultValue;
                    </code>
                </pre>

                <!-- More content sections... -->

                <div class="border-t border-gray-200 mt-12 pt-8">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-sm text-gray-500">Share this article:</p>
                            <div class="flex space-x-4 mt-2">
                                <a href="#" class="text-gray-600 hover:text-primary" aria-label="Share on Twitter">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="text-gray-600 hover:text-primary" aria-label="Share on LinkedIn">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-600 hover:text-primary" aria-label="Share on Facebook">
                                    <i class="fab fa-facebook"></i>
                                </a>
                            </div>
                        </div>
                        <a href="#" class="btn btn-primary" aria-label="View all JavaScript articles">
                            More JavaScript Articles
                        </a>
                    </div>
                </div>
            </div>
        </article>
    </main>

    <!-- Back to Top Button -->
    <button id="backToTop" 
            class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-secondary"
            aria-label="Back to top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Footer -->
    <footer class="bg-dark text-white py-8">
        <div class="container">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p>&copy; 2023 John Doe. All rights reserved.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="https://github.com" aria-label="GitHub" class="hover:text-primary">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="https://linkedin.com" aria-label="LinkedIn" class="hover:text-primary">
                        <i class="fab fa-linkedin text-xl"></i>
                    </a>
                    <a href="https://twitter.com" aria-label="Twitter" class="hover:text-primary">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom JS -->
    <script src="/js/app.js"></script>
    <script>
        // Back to top button
        const backToTop = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTop.classList.remove('opacity-0', 'invisible');
                backToTop.classList.add('opacity-100', 'visible');
            } else {
                backToTop.classList.remove('opacity-100', 'visible');
                backToTop.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Image modal functionality
        function openImageModal(img) {
            // Implementation for image modal
            console.log('Opening image modal for:', img.src);
        }
    </script>
</body>
</html>